<script>
import Vue from "vue";
export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  name: "GColumn",
  data() {
    return {};
  },
  render() {
    console.log(this.$scopedSlots);
    const { item: col } = this;
    let scopedSlots = {};
    let slot = this.$scopedSlots[col.prop];
    // 兼容没有过滤的空方法
    let filterDataByProp = (row) => row;
    // 存在需要过滤
    if (col.filter) {
      // 获取过滤器
      // const convertFilter = Vue.filter(col.filter);
      // scopedSlots.default = function ({ row }) {
      //   return convertFilter(row[col.prop], col.prop);
      // };
      // 获取过滤器
      // 判断是否附加了属性, test/operation
      let filterName = col.filter,
        propName = col.prop;
      if (col.filter.includes("&")) {
        const params = col.filter.split("&");
        filterName = params[0];
        propName = params[1];
      }
      filterDataByProp = (row) => {
        const convertFilter = Vue.filter(filterName);
        if (convertFilter) {
          let res = {
            ...row,
          };
          res[propName] = convertFilter(row[propName], propName);
          return res;
        }
      };
    }
    if (slot) {
      // scopedSlots.default = ({ row }) =>
      //   // 生成VNode，scoped里面的数据不干净，存在环形对象，JSON.stringify
      //   slot(row);
      scopedSlots.default = ({ row }) => {
        // 生成VNode，scoped里面的数据不干净，存在环形对象，JSON.stringify
        const newRow = filterDataByProp(row);
        return slot(newRow);
      };
    }
    // 自定义HTML
    else if (col.formatter) {
      // scopedSlots.default = ({ row }) =>  <div domPropsInnerHTML={col.formatter(row)} />;;
      scopedSlots.default = ({ row }) => {
        // row.name = "abc";
        const newRow = filterDataByProp(row);
        return <div domPropsInnerHTML={col.formatter(newRow)} />;
      };
    } else if (col.filter) {
      // 最后处理文字的filter
      scopedSlots.default = ({ row }) => {
        const newRow = filterDataByProp(row);
        return newRow[col.prop];
      };
    }
    // 存在需要过滤
    // if (col.filter) {
    //   // 获取过滤器
    //   const convertFilter = Vue.filter(col.filter);
    //   scopedSlots.default = function ({ row }) {
    //     console.log(
    //       " convertFilter(row[col.prop], col.prop)",
    //       convertFilter(row[col.prop], col.prop)
    //     );
    //     return convertFilter(row[col.prop], col.prop);
    //   };
    // }
    return (
      <el-table-column
        scopedSlots={scopedSlots}
        prop={col.prop}
        label={col.label}
        width={col.width}
        align={col.align}
      >
        {col.children &&
          col.children.map((c) => <GColumn item={c} scopedSlots={this.$scopedSlots} />)}
      </el-table-column>
    );
    // return <h1>我是列</h1>
  },
};
</script>

<style lang="" scoped></style>
